<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行卡管理 - 银行管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
        }
        .main-container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #0d47a1;
            color: #fff;
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 10px 20px;
            border-left: 3px solid transparent;
        }
        .sidebar .nav-link:hover {
            background-color: #1565c0;
            border-left: 3px solid #fff;
        }
        .sidebar .nav-link.active {
            background-color: #1976d2;
            border-left: 3px solid #fff;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
        }
        .header {
            background-color: #1976d2;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 1.5rem;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #1976d2;
            color: #fff;
            border-radius: 8px 8px 0 0 !important;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="text-center mb-4">
                <h3>银行管理系统</h3>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/admin/index">
                        <i class="fa fa-dashboard"></i> 控制台
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/user/page">
                        <i class="fa fa-users"></i> 客户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/admin/card/page">
                        <i class="fa fa-credit-card"></i> 银行卡管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/deposit/page">
                        <i class="fa fa-money"></i> 存款业务管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/trade/page">
                        <i class="fa fa-exchange"></i> 交易管理
                    </a>
                </li>
                <li class="nav-item mt-5">
                    <a class="nav-link" href="/">
                        <i class="fa fa-sign-out"></i> 退出系统
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="flex-grow-1 d-flex flex-column">
            <div class="header">
                <h1>银行卡管理</h1>
                <div class="d-flex align-items-center">
                    <span>欢迎，管理员</span>
                </div>
            </div>
            
            <div class="content">
                <div id="alertContainer"></div>
                
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">银行卡列表</h5>
                        <div>
                            <button class="btn btn-sm btn-light mr-2" id="addCardBtn">
                                <i class="fa fa-plus"></i> 添加银行卡
                            </button>
                            <a href="/admin/card/export" class="btn btn-sm btn-light">
                                <i class="fa fa-download"></i> 导出数据
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchKeyword" placeholder="输入卡号或客户姓名进行搜索">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" id="searchBtn">
                                        <i class="fa fa-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>卡号</th>
                                        <th>客户姓名</th>
                                        <th>存款类型</th>
                                        <th>余额</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="cardTableBody">
                                    <!-- 数据将通过AJAX加载 -->
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                总计 <span id="totalCount">0</span> 条记录
                            </div>
                            <ul class="pagination" id="pagination">
                                <!-- 分页将通过JS生成 -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑银行卡模态框 -->
    <div class="modal fade" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cardModalLabel">添加银行卡</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 表单内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveCardBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 通用提示框
        function showAlert(message, type) {
            const alertDiv = $('<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                message +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
                '</button>' +
                '</div>');
            
            $('#alertContainer').append(alertDiv);
            
            setTimeout(function() {
                alertDiv.alert('close');
            }, 3000);
        }
        
        $(document).ready(function() {
            // 加载银行卡列表
            loadCardList();
            
            // 添加银行卡按钮点击事件
            $('#addCardBtn').click(function() {
                // 清空模态框表单
                $('#cardModal .modal-body').html(`
                    <form id="cardForm">
                        <div class="form-group">
                            <label for="customerId">客户ID</label>
                            <input type="text" class="form-control" id="customerId" name="customerId" required>
                        </div>
                        <div class="form-group">
                            <label for="savingId">存款类型</label>
                            <select class="form-control" id="savingId" name="savingId" required>
                                <option value="">请选择存款类型</option>
                                <!-- 存款类型选项将通过AJAX加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入6位数字密码" required>
                            <small class="form-text text-muted">密码必须为6位数字</small>
                        </div>
                    </form>
                `);
                
                // 加载存款类型选项
                $.ajax({
                    url: '/admin/deposit/list-all',
                    type: 'GET',
                    success: function(res) {
                        if (res.code === 200) {
                            let options = '<option value="">请选择存款类型</option>';
                            res.data.forEach(function(item) {
                                options += '<option value="' + item.savingId + '">' + item.savingName + '</option>';
                            });
                            $('#savingId').html(options);
                        }
                    }
                });
                
                // 显示模态框
                $('#cardModalLabel').text('添加银行卡');
                $('#cardModal').modal('show');
            });
            
            // 搜索按钮点击事件
            $('#searchBtn').click(function() {
                const keyword = $('#searchKeyword').val().trim();
                loadCardList(1, 10, keyword);
            });
            
            // 保存银行卡按钮点击事件
            $('#saveCardBtn').click(function() {
                const customerId = $('#customerId').val().trim();
                const savingId = $('#savingId').val();
                const password = $('#password').val().trim();
                
                if (!customerId) {
                    showAlert('请输入客户ID', 'warning');
                    return;
                }
                
                if (!savingId) {
                    showAlert('请选择存款类型', 'warning');
                    return;
                }
                
                if (!password || password.length !== 6 || !/^\d{6}$/.test(password)) {
                    showAlert('密码必须为6位数字', 'warning');
                    return;
                }
                
                // 提交表单数据
                $.ajax({
                    url: '/admin/card/add',
                    type: 'POST',
                    data: {
                        customerId: customerId,
                        savingId: savingId,
                        password: password
                    },
                    success: function(res) {
                        if (res.code === 200) {
                            showAlert('银行卡添加成功', 'success');
                            $('#cardModal').modal('hide');
                            loadCardList(); // 重新加载列表
                        } else {
                            showAlert(res.message || '添加失败', 'danger');
                        }
                    },
                    error: function() {
                        showAlert('网络错误，请稍后重试', 'danger');
                    }
                });
            });
            
            function loadCardList(page = 1, limit = 10, keyword = '') {
                // AJAX请求加载数据
                $.ajax({
                    url: '/admin/card/list',
                    type: 'GET',
                    data: {
                        page: page,
                        limit: limit,
                        keyword: keyword
                    },
                    success: function(res) {
                        if (res.code === 200) {
                            const data = res.data;
                            let html = '';
                            
                            if (data.records && data.records.length > 0) {
                                data.records.forEach(function(item) {
                                    html += '<tr>';
                                    html += '<td>' + item.cardId + '</td>';
                                    html += '<td>' + item.customerName + '</td>';
                                    html += '<td>' + item.savingName + '</td>';
                                    html += '<td>' + item.balance + '</td>';
                                    html += '<td>' + (item.isReportLoss === 'YES' ? '<span class="text-danger">已挂失</span>' : '<span class="text-success">正常</span>') + '</td>';
                                    html += '<td>';
                                    html += '<button class="btn btn-sm btn-primary mr-1 edit-btn" data-id="' + item.cardId + '">修改</button>';
                                    html += '<button class="btn btn-sm btn-danger delete-btn" data-id="' + item.cardId + '">删除</button>';
                                    html += '</td>';
                                    html += '</tr>';
                                });
                            } else {
                                html = '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
                            }
                            
                            $('#cardTableBody').html(html);
                            $('#totalCount').text(data.total || 0);
                            
                            // 生成分页
                            renderPagination(data.total, data.size, data.current);
                        }
                    }
                });
            }
            
            // 生成分页
            function renderPagination(total, pageSize, currentPage) {
                if (!total || total <= 0) {
                    $('#pagination').empty();
                    return;
                }
                
                const totalPages = Math.ceil(total / pageSize);
                let html = '';
                
                // 上一页
                html += '<li class="page-item ' + (currentPage <= 1 ? 'disabled' : '') + '">';
                html += '<a class="page-link" href="javascript:void(0);" data-page="' + (currentPage - 1) + '">上一页</a>';
                html += '</li>';
                
                // 页码
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, startPage + 4);
                
                for (let i = startPage; i <= endPage; i++) {
                    html += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '">';
                    html += '<a class="page-link" href="javascript:void(0);" data-page="' + i + '">' + i + '</a>';
                    html += '</li>';
                }
                
                // 下一页
                html += '<li class="page-item ' + (currentPage >= totalPages ? 'disabled' : '') + '">';
                html += '<a class="page-link" href="javascript:void(0);" data-page="' + (currentPage + 1) + '">下一页</a>';
                html += '</li>';
                
                $('#pagination').html(html);
                
                // 绑定分页点击事件
                $('#pagination .page-link').click(function() {
                    const page = $(this).data('page');
                    if (page && page !== currentPage) {
                        loadCardList(page, pageSize);
                    }
                });
            }
            
            // 绑定修改按钮点击事件
            $(document).on('click', '.edit-btn', function() {
                const cardId = $(this).data('id');
                
                // 获取银行卡信息
                $.ajax({
                    url: '/admin/card/info/' + cardId,
                    type: 'GET',
                    success: function(res) {
                        if (res.code === 200) {
                            const card = res.data;
                            
                            // 填充表单
                            $('#cardModal .modal-body').html(`
                                <form id="cardForm">
                                    <input type="hidden" id="cardId" name="cardId" value="${card.cardId}">
                                    <div class="form-group">
                                        <label>卡号</label>
                                        <input type="text" class="form-control" value="${card.cardId}" disabled>
                                    </div>
                                    <div class="form-group">
                                        <label for="customerId">客户ID</label>
                                        <input type="text" class="form-control" id="customerId" name="customerId" value="${card.customerId}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="savingId">存款类型</label>
                                        <select class="form-control" id="savingId" name="savingId" required>
                                            <option value="">请选择存款类型</option>
                                            <!-- 存款类型选项将通过AJAX加载 -->
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">密码</label>
                                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入6位数字密码" required>
                                        <small class="form-text text-muted">留空表示不修改密码</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="isReportLoss">状态</label>
                                        <select class="form-control" id="isReportLoss" name="isReportLoss">
                                            <option value="NO" ${card.isReportLoss === 'NO' ? 'selected' : ''}>正常</option>
                                            <option value="YES" ${card.isReportLoss === 'YES' ? 'selected' : ''}>已挂失</option>
                                        </select>
                                    </div>
                                </form>
                            `);
                            
                            // 加载存款类型选项
                            $.ajax({
                                url: '/admin/deposit/list-all',
                                type: 'GET',
                                success: function(res) {
                                    if (res.code === 200) {
                                        let options = '<option value="">请选择存款类型</option>';
                                        res.data.forEach(function(item) {
                                            options += '<option value="' + item.savingId + '" ' + (item.savingId === card.savingId ? 'selected' : '') + '>' + item.savingName + '</option>';
                                        });
                                        $('#savingId').html(options);
                                    }
                                }
                            });
                            
                            // 显示模态框
                            $('#cardModalLabel').text('修改银行卡');
                            $('#cardModal').modal('show');
                            
                            // 修改保存按钮点击事件
                            $('#saveCardBtn').off('click').on('click', function() {
                                const cardId = $('#cardId').val();
                                const customerId = $('#customerId').val().trim();
                                const savingId = $('#savingId').val();
                                const password = $('#password').val().trim();
                                const isReportLoss = $('#isReportLoss').val();
                                
                                if (!customerId) {
                                    showAlert('请输入客户ID', 'warning');
                                    return;
                                }
                                
                                if (!savingId) {
                                    showAlert('请选择存款类型', 'warning');
                                    return;
                                }
                                
                                if (password && (password.length !== 6 || !/^\d{6}$/.test(password))) {
                                    showAlert('密码必须为6位数字', 'warning');
                                    return;
                                }
                                
                                // 构建更新数据
                                const updateData = {
                                    cardId: cardId,
                                    customerId: customerId,
                                    savingId: savingId,
                                    isReportLoss: isReportLoss
                                };
                                
                                // 如果密码不为空，则更新密码
                                if (password) {
                                    updateData.pass = password;
                                }
                                
                                // 提交表单数据
                                $.ajax({
                                    url: '/admin/card/update',
                                    type: 'POST',
                                    contentType: 'application/json',
                                    data: JSON.stringify(updateData),
                                    success: function(res) {
                                        if (res.code === 200) {
                                            showAlert('银行卡修改成功', 'success');
                                            $('#cardModal').modal('hide');
                                            loadCardList(); // 重新加载列表
                                        } else {
                                            showAlert(res.message || '修改失败', 'danger');
                                        }
                                    },
                                    error: function() {
                                        showAlert('网络错误，请稍后重试', 'danger');
                                    }
                                });
                            });
                        } else {
                            showAlert(res.message || '获取银行卡信息失败', 'danger');
                        }
                    },
                    error: function() {
                        showAlert('网络错误，请稍后重试', 'danger');
                    }
                });
            });
            
            // 绑定删除按钮点击事件
            $(document).on('click', '.delete-btn', function() {
                const cardId = $(this).data('id');
                if (confirm('确定要删除该银行卡吗？')) {
                    $.ajax({
                        url: '/admin/card/delete/' + cardId,
                        type: 'DELETE',
                        success: function(res) {
                            if (res.code === 200) {
                                showAlert('删除成功', 'success');
                                loadCardList(); // 重新加载列表
                            } else {
                                showAlert(res.message || '删除失败', 'danger');
                            }
                        },
                        error: function() {
                            showAlert('网络错误，请稍后重试', 'danger');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 